<script setup>
import { priorityColor, convertToPlain, taskTypeColor } from '@/utils/task-utils.js'
import { MoreFilled } from '@element-plus/icons-vue'
import { useDictionary } from '@/use/use-dictionary'
import dayjs from 'dayjs'
import { ElMessageBox } from 'element-plus'

const props = defineProps({
  task: Object,
  allowOperations: Boolean,
  moreOperation: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['click', 'dialogClick', 'updateTask', 'deleteTask', 'receiveTask', 'goProject'])

const dict = useDictionary(['task_priority', 'task_type', 'task_status'])

const userAvatarList = computed(() => {
  let list = []
  if (props.task?.taskUserAvatar) list.push({ url: props.task?.taskUserAvatar, name: props.task?.taskUserName })
  if (props.task?.taskAssistAvatar) list.push({ url: props.task?.taskAssistAvatar, name: props.task?.taskAssistName })
  return list
})

function handleClick() {
  emit('click', props.task)
}

function handleDialog() {
  emit('dialogClick', props.task)
}

function handleMoreClick(item) {
  switch (item) {
    case '删除':
      handleDeleteTask()
      break
    case '修改':
      handleUpdateTask()
      break
    case '任务领取':
      handleReceiveTask()
      break
    case '进入项目':
      handleGoProject()
      break
  }
}

function handleDeleteTask() {
  ElMessageBox.confirm(`确认删除【${props.task.taskTitle}】吗?`, '删除确认', {
    cancelButtonText: '取消',
    confirmButtonText: '确认',
    type: 'warning',
  })
    .then(() => {
      emit('deleteTask', JSON.parse(JSON.stringify(props.task)))
    })
    .catch(() => {})
}

function handleUpdateTask() {
  emit('updateTask', JSON.parse(JSON.stringify(props.task)))
}

function handleReceiveTask() {
  emit('receiveTask', JSON.parse(JSON.stringify(props.task)))
}

function handleGoProject() {
  emit('goProject', JSON.parse(JSON.stringify(props.task)))
}
function filterTaskType(type) {
  let obj = dict.getListByType('task_type').find((item) => parseInt(item.dictValue) === type)
  return obj?.remark
}
</script>

<template>
  <div class="task-card" @click="handleClick">
    <div class="task-card-head">
      <span v-if="task.parentCode" class="task-code">
        #{{ task.parentCode }} /
        <span class="task-child-code">{{ task.taskCode }}</span>
      </span>
      <span v-else class="task-code">#{{ task.taskCode }}</span>
      <div class="task-title">
        <el-tooltip :content="task.taskTitle" :show-after="500" :hide-after="0">
          <span>{{ task.taskTitle }}</span>
        </el-tooltip>
      </div>
      <div class="deferred-status" v-if="task.delayFlag === 1">已延期</div>

      <!--<div class="task-tag">-->
      <!--  <span :style="{ backgroundColor: formatterBackColor(task.taskType) }">-->
      <!--    {{ dict.translate('task_type', task.taskType) }}-->
      <!--  </span>-->
      <!--</div>-->
      <!--<div class="task-status" :style="{ backgroundColor: formatterColor(task.currentStatus) }">-->
      <!--  {{ dict.translate('task_status', task.currentStatus) }}-->
      <!--</div>-->
    </div>
    <el-tooltip :show-after="500" :hide-after="0">
      <template #content>
        <div style="max-width: 500px">
          {{ convertToPlain(task.taskDetail) }}
        </div>
      </template>
      <div class="task-describe">{{ convertToPlain(task.taskDetail) }}</div>
    </el-tooltip>
    <div class="task-priority" :style="priorityColor(task.taskPriority)">
      {{ dict.translate('task_priority', task.taskPriority) }}
    </div>
    <div class="task-priority" :style="taskTypeColor(task.taskProp)">
      {{ filterTaskType(task.taskProp) }}
    </div>
    <div class="task-date-info">
      <span>
        <SvgIcon name="time-stop"></SvgIcon>
        截止: {{ dayjs(task.planEndtime).format('YYYY-MM-DD') }}
      </span>
      <span>
        <SvgIcon name="take"></SvgIcon>
        已耗时: {{ task.currentCostHour }} h
      </span>
    </div>
    <!--<div class="task-progress">-->
    <!--<el-progress :percentage="task.completePercent" :color="formatterColor(task.currentStatus)"></el-progress>-->
    <!--<div class="task-overtime" :class="{ 'not-overdue': task.delayFlag }">-->
    <!--  <el-icon size="14"><Clock /></el-icon>-->
    <!--  <span>{{ task.planCostHour - task.currentCostHour }}h</span>-->
    <!--</div>-->
    <!--</div>-->
    <div class="task-card-footer">
      <div class="task-member">
        <div class="task-member-item" v-for="(item, index) in userAvatarList" :key="index">
          <el-tooltip class="box-item" effect="dark" :content="item.name" placement="top">
            <div class="task-member-item-img">
              <img :src="item.url" alt="" />
            </div>
          </el-tooltip>
        </div>
      </div>
      <div>
        <!-- <SvgIcon name="card-msg" @click.stop="handleDialog"></SvgIcon> -->
        <el-popover v-if="props.moreOperation" trigger="click" popper-class="more-operation-popover">
          <template v-if="!allowOperations">
            <div class="btn" v-if="task.currentStatus.toString() === '1'" @click="handleMoreClick('任务领取')">
              任务领取
            </div>
            <div class="btn" @click="handleMoreClick('进入项目')">进入项目</div>
          </template>
          <!-- <div class="btn" @click="handleDialog">进入群组</div> -->
          <template v-if="allowOperations">
            <div v-show="task.currentStatus !== 4" class="btn" @click="handleMoreClick('修改')">修改</div>
            <div class="btn" @click="handleMoreClick('删除')">删除</div>
          </template>
          <template #reference>
            <el-icon size="16" style="color: #ccc" @click.stop><MoreFilled /></el-icon>
          </template>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.task-card {
  padding: 10px 18px;
  border-radius: 8px;
  background-color: var(--elp-bg-color);
  margin-bottom: 15px;
  cursor: pointer;
  width: 100%;
  transition:
    transform 0.1s,
    box-shadow 0.3s,
    width 0.3s,
    left 0.3s;
  backface-visibility: hidden;
  &:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow:
      0 8px 12px var(--fe-task-card-box-shadow-color),
      0 -4px 8px var(--fe-task-card-box-shadow-color);
  }
  & > div + div {
    margin-top: 12px;
  }
  .task-card-head {
    @include use-flex(center);
    .deferred-status {
      color: var(--elp-color-info);
      font-size: 14px;
    }
    .task-title {
      flex: 1;
      font-size: 18px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 5px;
    }
    .task-code {
      cursor: pointer;
      margin-right: 5px;
      color: var(--elp-color-primary-light-3);
    }
    .task-child-code {
      font-size: 12px;
      color: var(--elp-color-info);
    }
    .task-tag {
      --task-tag-bg-color-project: var(--elp-color-danger);
      --task-tag-bg-color-dept: var(--elp-color-primary);
      --task-tag-bg-color-temporary: var(--elp-color-warning);
      --task-tag-bg-color-regular: var(--elp-color-info);
      margin-right: 5px;
      span {
        font-size: 13px;
        color: #fff;
        padding: 3px;
        border-radius: 4px;
      }
    }
    .task-status {
      float: right;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      padding: 2px 10px;
      &:after {
        clear: both;
      }
    }
  }
  .task-describe {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }

  .task-priority {
    font-size: 12px;
    display: inline-block;
    padding: 2px 15px;
    border-radius: 50px;
    margin-left: 5px;
  }
  .task-date-info {
    @include use-flex(center, space-between);
    font-size: 12px;
    color: var(--elp-text-color-secondary);
    .svg-icon {
      margin-right: 5px;
    }
    span {
      @include use-flex(center);
    }
  }
  .task-progress {
    @include use-flex(center);
    .task-overtime {
      @include use-flex(center);
      font-size: 12px;
      color: #fff;
      border-radius: 4px;
      padding: 2px 5px;
      background-color: var(--elp-color-success-light-3);
      .not-overdue {
        background-color: var(--elp-color-error-light-3);
      }
      .elp-icon {
        margin-right: 5px;
      }
    }
    .elp-progress {
      flex: 1;
    }
  }
  .task-card-footer {
    @include use-flex(center, space-between);
    .task-member {
      @include use-flex(center, flex-start);
      &-item {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        &-img {
          cursor: pointer;
          border-radius: 50%;
          overflow: hidden;
          position: relative;
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .elp-icon {
      cursor: pointer;
      margin-left: 10px;
    }
  }
}
</style>
